<template>
  <div id="home-view">
    <div class="home-view-content-title">
      <p class="title">Welcome to UHub+</p>
    </div>
    <!-- <div class="home-view-content-logo">
      <img src="@/assets/logo1.png" alt="logo" />
    </div> -->
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
#home-view {
  padding: 20px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(
    to right,
    rgba(173, 237, 255, 0.2),
    rgba(204, 255, 195, 0.4)
  );
  backdrop-filter: blur(10px); /* 模糊效果，模糊半径为 10 像素 */
  border: 1px solid rgba(72, 114, 151, 0.3); /* 半透明的边框 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  border-radius: 25px;
  .home-view-content-logo {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .home-view-content-title {
    transition: all 0.5s;
    // width: 50%;
    p {
      display: inline-block; /* 使元素具有块级特性，方便设置宽高 */
      background: linear-gradient(
        45deg,
        rgba(173, 237, 255, 1),
        rgba(204, 255, 195, 1)
      ); /* 创建线性渐变，从红色到蓝色，角度为 45 度 */
      -webkit-background-clip: text; /* 仅在 WebKit 内核浏览器中使用背景裁剪到文本 */
      background-clip: text; /* 标准的背景裁剪到文本属性 */
      -webkit-text-fill-color: transparent; /* 使文本填充色为透明，显示出背景渐变 */
      color: transparent; /* 确保在不支持 -webkit-text-fill-color 的情况下，文本颜色也为透明 */
      text-shadow: 2px 2px 4px rgba(21, 26, 27, 0.8);
      font-size: 50px; /* 设置字体大小，可根据需要调整 */
      font-weight: bold; /* 设置字体粗细，可根据需要调整 */
      font-style: italic;
      transition: all 0.5s;
    }
    .title:hover {
      transform: scale(1.1);
      text-shadow: 0px 0px 0px rgba(21, 26, 27, 0.8);
    }
  }
}
</style>
